{% from 'macros/icon.njk' import icon with context %}

<footer class="type--footer gap-top-1000 lg:pad-left-600 lg:pad-right-600" data-side-nav-inert data-search-inert>

  <div class="pad-top-600 pad-bottom-600 pad-left-400 pad-right-400 hairline-bottom lg:pad-left-0 lg:pad-right-0">
    <div class="display-flex direction-column lg:direction-row lg:align-center">
      <div class="footer__heading">{{ 'i18n.footer.follow_us' | i18n(locale) }}</div>
      <div class="display-flex color-secondary-text gap-top-300 lg:gap-top-0">
        <a href="https://www.youtube.com/user/ChromeDevelopers" class="display-inline-flex color-secondary-text lg:gap-left-400" aria-label="{{ 'i18n.footer.youtube' | i18n(locale) }}">
          {{ icon('youtube') }}
        </a>
        <a href="https://twitter.com/ChromiumDev" class="display-inline-flex color-secondary-text gap-left-400" aria-label="{{ 'i18n.footer.twitter' | i18n(locale) }}">
          {{ icon('twitter') }}
        </a>
      </div>
    </div>
  </div>

  <div class="pad-top-600 pad-bottom-600 pad-left-400 pad-right-400 hairline-bottom  lg:pad-left-0 lg:pad-right-0">
    <div class="display-flex direction-column lg:direction-row justify-content-between">
      <div class="footer__stack stack-recursive flex-1">
        <div class="footer__heading">{{ 'i18n.footer.contribute' | i18n(locale) }}</div>
        <ul class="pad-0 gap-bottom-0" role="list">
          <li>
            <a class="footer__link" href="https://github.com/GoogleChrome/developer.chrome.com/issues/new?assignees=&labels=bug&template=bug_report.md&title=">
              {{ 'i18n.footer.file_a_bug' | i18n(locale) }}
            </a>
          </li>
          <li>
            <a class="footer__link" href="https://github.com/GoogleChrome/developer.chrome.com/">
              {{ 'i18n.footer.view_source' | i18n(locale) }}
            </a>
          </li>
        </ul>
      </div>

      <div class="footer__stack stack-recursive flex-1">
        <div class="footer__heading">{{ 'i18n.footer.related_content' | i18n(locale) }}</div>
        <ul class="pad-0 gap-bottom-0" role="list">
          <li>
            <a class="footer__link" href="https://web.dev/">
              {{ 'i18n.footer.web_dev' | i18n(locale) }}
            </a>
          </li>
          <li>
            <a class="footer__link" href="https://developers.google.com/web/">
              {{ 'i18n.footer.web_fundamentals' | i18n(locale) }}
            </a>
          </li>
          <li>
            <a class="footer__link" href="https://web.dev/tags/case-study/">
              {{ 'i18n.footer.case_studies' | i18n(locale) }}
            </a>
          </li>
          <li>
            <a class="footer__link" href="https://devwebfeed.appspot.com/">
              {{ 'i18n.footer.content_firehose' | i18n(locale) }}
            </a>
          </li>
          <li>
            <a class="footer__link" href="https://web.dev/podcasts/">
              {{ 'i18n.footer.podcasts' | i18n(locale) }}
            </a>
          </li>
        </ul>
      </div>

      <div class="footer__stack stack-recursive flex-1">
        <div class="footer__heading">{{ 'i18n.footer.connect' | i18n(locale) }}</div>
        <ul class="pad-0 gap-bottom-0" role="list">
          <li>
            <a class="footer__link" href="https://twitter.com/chromiumdev/">
              {{ 'i18n.footer.twitter' | i18n(locale) }}
            </a>
          </li>
          <li>
            <a class="footer__link" href="https://www.youtube.com/user/ChromeDevelopers">
              {{ 'i18n.footer.youtube' | i18n(locale) }}
            </a>
          </li>
          <li>
            <a class="footer__link" href="https://github.com/googlechrome">
              {{ 'i18n.footer.github' | i18n(locale) }}
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <div class="pad-top-600 pad-bottom-600 pad-left-400 pad-right-400  lg:pad-left-0 lg:pad-right-0">
    <div class="display-flex direction-column lg:direction-row align-start lg:align-center">
      <svg width="180" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.36 15.32a7.465 7.465 0 01-3.76-.98 7.287 7.287 0 01-2.72-2.68c-.667-1.147-1-2.42-1-3.82s.333-2.667 1-3.8a7.243 7.243 0 012.72-2.7A7.464 7.464 0 018.36.36c1.08 0 2.087.193 3.02.58.933.387 1.713.927 2.34 1.62l-1.56 1.56a4.78 4.78 0 00-1.66-1.2c-.64-.28-1.353-.42-2.14-.42-.933 0-1.8.22-2.6.66-.8.44-1.44 1.067-1.92 1.88-.467.813-.7 1.747-.7 2.8 0 1.053.24 1.987.72 2.8.48.813 1.12 1.44 1.92 1.88.8.44 1.667.66 2.6.66.84 0 1.547-.127 2.12-.38a5.434 5.434 0 001.54-1.02c.293-.28.54-.64.74-1.08.213-.453.36-.94.44-1.46H8.34v-2h6.98c.08.453.12.84.12 1.16a7.89 7.89 0 01-.44 2.62 5.63 5.63 0 01-1.32 2.16c-1.36 1.427-3.133 2.14-5.32 2.14zm14.05 0c-.987 0-1.873-.227-2.66-.68a5.087 5.087 0 01-1.86-1.9c-.44-.8-.66-1.7-.66-2.7 0-1 .22-1.9.66-2.7a4.939 4.939 0 011.86-1.88c.787-.467 1.673-.7 2.66-.7 1 0 1.893.233 2.68.7.787.453 1.4 1.08 1.84 1.88.44.8.66 1.7.66 2.7 0 1-.22 1.9-.66 2.7a4.939 4.939 0 01-1.84 1.9c-.787.453-1.68.68-2.68.68zm0-2.02c.533 0 1.027-.133 1.48-.4.453-.267.82-.647 1.1-1.14.28-.493.42-1.067.42-1.72 0-.667-.14-1.247-.42-1.74a2.868 2.868 0 00-1.1-1.12 2.867 2.867 0 00-1.48-.4c-.52 0-1.013.133-1.48.4-.453.253-.82.627-1.1 1.12-.267.493-.4 1.073-.4 1.74 0 .653.14 1.227.42 1.72.28.493.647.873 1.1 1.14.453.267.94.4 1.46.4zm12.019 2.02c-.987 0-1.874-.227-2.66-.68a5.087 5.087 0 01-1.86-1.9c-.44-.8-.66-1.7-.66-2.7 0-1 .22-1.9.66-2.7a4.939 4.939 0 011.86-1.88c.786-.467 1.673-.7 2.66-.7 1 0 1.893.233 2.68.7.786.453 1.4 1.08 1.84 1.88.44.8.66 1.7.66 2.7 0 1-.22 1.9-.66 2.7a4.94 4.94 0 01-1.84 1.9c-.787.453-1.68.68-2.68.68zm0-2.02c.533 0 1.026-.133 1.48-.4.453-.267.82-.647 1.1-1.14.28-.493.42-1.067.42-1.72 0-.667-.14-1.247-.42-1.74a2.868 2.868 0 00-1.1-1.12 2.868 2.868 0 00-1.48-.4c-.52 0-1.014.133-1.48.4-.454.253-.82.627-1.1 1.12-.267.493-.4 1.073-.4 1.74 0 .653.14 1.227.42 1.72.28.493.646.873 1.1 1.14.453.267.94.4 1.46.4zm11.878 6.34c-1.24 0-2.266-.293-3.08-.88-.8-.573-1.34-1.247-1.62-2.02l2.08-.86c.2.547.534.98 1 1.3.467.32 1.007.48 1.62.48.92 0 1.64-.28 2.16-.84.534-.56.8-1.333.8-2.32v-.86h-.12c-.32.467-.76.84-1.32 1.12-.546.28-1.173.42-1.88.42-.826 0-1.6-.22-2.32-.66-.706-.44-1.28-1.053-1.72-1.84-.426-.8-.64-1.7-.64-2.7 0-1 .214-1.893.64-2.68.44-.8 1.014-1.42 1.72-1.86a4.276 4.276 0 012.32-.68c.707 0 1.334.14 1.88.42.56.28 1 .653 1.32 1.12h.12V5.08h2.1v9.36c0 1.093-.22 2.033-.66 2.82a4.215 4.215 0 01-1.8 1.78c-.76.4-1.626.6-2.6.6zm.06-6.46c.52 0 1-.127 1.44-.38a2.81 2.81 0 001.06-1.1c.267-.493.4-1.067.4-1.72 0-.667-.133-1.24-.4-1.72-.266-.493-.62-.867-1.06-1.12-.44-.253-.92-.38-1.44-.38-.52 0-1 .133-1.44.4-.44.253-.793.627-1.06 1.12-.266.48-.4 1.047-.4 1.7s.134 1.227.4 1.72c.267.48.62.847 1.06 1.1.44.253.92.38 1.44.38zM54.14.68h2.2V15h-2.2V.68zm9.45 14.64c-.973 0-1.853-.227-2.64-.68a4.838 4.838 0 01-1.82-1.88c-.44-.813-.66-1.72-.66-2.72 0-.96.207-1.84.62-2.64a4.848 4.848 0 011.78-1.92c.76-.48 1.627-.72 2.6-.72 1 0 1.867.22 2.6.66a4.28 4.28 0 011.7 1.84c.387.773.58 1.667.58 2.68 0 .12-.007.24-.02.36a4.16 4.16 0 00-.02.2h-7.64c.067.907.393 1.607.98 2.1.587.493 1.253.74 2 .74 1.147 0 2.027-.533 2.64-1.6l1.88.9a5.195 5.195 0 01-1.84 1.96c-.773.48-1.687.72-2.74.72zm2.52-6.5a2.419 2.419 0 00-.32-.98c-.187-.333-.48-.613-.88-.84-.387-.24-.873-.36-1.46-.36-.653 0-1.22.2-1.7.6-.467.4-.787.927-.96 1.58h5.32zm9.7-8.14h4.6c1.48 0 2.767.3 3.86.9a6.137 6.137 0 012.54 2.54c.6 1.08.9 2.32.9 3.72 0 1.4-.3 2.647-.9 3.74a6.168 6.168 0 01-2.54 2.52c-1.093.6-2.38.9-3.86.9h-4.6V.68zm4.54 12.18c1.6 0 2.847-.44 3.74-1.32.907-.893 1.36-2.127 1.36-3.7 0-1.56-.453-2.787-1.36-3.68-.893-.893-2.14-1.34-3.74-1.34h-2.3v10.04h2.3zm14.042 2.46c-.973 0-1.853-.227-2.64-.68a4.839 4.839 0 01-1.82-1.88c-.44-.813-.66-1.72-.66-2.72 0-.96.207-1.84.62-2.64a4.849 4.849 0 011.78-1.92c.76-.48 1.627-.72 2.6-.72 1 0 1.867.22 2.6.66a4.28 4.28 0 011.7 1.84c.387.773.58 1.667.58 2.68 0 .12-.006.24-.02.36-.013.12-.02.187-.02.2h-7.64c.067.907.394 1.607.98 2.1.587.493 1.254.74 2 .74 1.147 0 2.027-.533 2.64-1.6l1.88.9a5.195 5.195 0 01-1.84 1.96c-.773.48-1.686.72-2.74.72zm2.52-6.5a2.417 2.417 0 00-.32-.98c-.186-.333-.48-.613-.88-.84-.386-.24-.873-.36-1.46-.36-.653 0-1.22.2-1.7.6-.466.4-.786.927-.96 1.58h5.32zm3.136-3.74h2.46l2.72 7.08h.08l2.76-7.08h2.42l-4.14 9.92h-2.2l-4.1-9.92zm16.37 10.24c-.973 0-1.853-.227-2.64-.68a4.84 4.84 0 01-1.82-1.88c-.44-.813-.66-1.72-.66-2.72 0-.96.207-1.84.62-2.64a4.851 4.851 0 011.78-1.92c.76-.48 1.627-.72 2.6-.72 1 0 1.867.22 2.6.66a4.274 4.274 0 011.7 1.84c.387.773.58 1.667.58 2.68 0 .12-.006.24-.02.36-.013.12-.02.187-.02.2h-7.64c.067.907.394 1.607.98 2.1.587.493 1.254.74 2 .74 1.147 0 2.027-.533 2.64-1.6l1.88.9a5.192 5.192 0 01-1.84 1.96c-.773.48-1.686.72-2.74.72zm2.52-6.5a2.402 2.402 0 00-.32-.98c-.186-.333-.48-.613-.88-.84-.386-.24-.873-.36-1.46-.36-.653 0-1.22.2-1.7.6-.466.4-.786.927-.96 1.58h5.32zm4.451-8.14h2.2V15h-2.2V.68zm9.509 14.64c-.986 0-1.873-.227-2.66-.68a5.098 5.098 0 01-1.86-1.9c-.44-.8-.66-1.7-.66-2.7 0-1 .22-1.9.66-2.7a4.949 4.949 0 011.86-1.88c.787-.467 1.674-.7 2.66-.7 1 0 1.894.233 2.68.7.787.453 1.4 1.08 1.84 1.88.44.8.66 1.7.66 2.7 0 1-.22 1.9-.66 2.7a4.937 4.937 0 01-1.84 1.9c-.786.453-1.68.68-2.68.68zm0-2.02c.534 0 1.027-.133 1.48-.4.454-.267.82-.647 1.1-1.14.28-.493.42-1.067.42-1.72 0-.667-.14-1.247-.42-1.74a2.864 2.864 0 00-1.1-1.12 2.865 2.865 0 00-1.48-.4c-.52 0-1.013.133-1.48.4a2.87 2.87 0 00-1.1 1.12c-.266.493-.4 1.073-.4 1.74 0 .653.14 1.227.42 1.72.28.493.647.873 1.1 1.14.454.267.94.4 1.46.4zm7.222-8.22h2.08v1.28h.12c.28-.453.7-.833 1.26-1.14.573-.307 1.22-.46 1.94-.46.853 0 1.64.227 2.36.68.733.453 1.313 1.087 1.74 1.9.44.8.66 1.7.66 2.7 0 1-.22 1.9-.66 2.7a4.992 4.992 0 01-1.74 1.9c-.72.453-1.507.68-2.36.68-.72 0-1.367-.153-1.94-.46-.56-.307-.98-.693-1.26-1.16h-.12l.12 1.4v4.22h-2.2V5.08zm5.02 8.22c.52 0 1-.133 1.44-.4a2.88 2.88 0 001.08-1.14c.28-.507.42-1.08.42-1.72 0-.64-.14-1.207-.42-1.7a2.849 2.849 0 00-1.08-1.16c-.44-.267-.92-.4-1.44-.4a2.83 2.83 0 00-1.46.4c-.44.267-.8.647-1.08 1.14-.267.493-.4 1.067-.4 1.72s.133 1.227.4 1.72c.28.493.64.873 1.08 1.14.453.267.94.4 1.46.4zm11.912 2.02c-.974 0-1.854-.227-2.64-.68a4.834 4.834 0 01-1.82-1.88c-.44-.813-.66-1.72-.66-2.72 0-.96.206-1.84.62-2.64a4.844 4.844 0 011.78-1.92c.76-.48 1.626-.72 2.6-.72 1 0 1.866.22 2.6.66a4.286 4.286 0 011.7 1.84c.386.773.58 1.667.58 2.68 0 .12-.007.24-.02.36a3.41 3.41 0 00-.02.2h-7.64c.066.907.393 1.607.98 2.1a3.02 3.02 0 002 .74c1.146 0 2.026-.533 2.64-1.6l1.88.9a5.2 5.2 0 01-1.84 1.96c-.774.48-1.687.72-2.74.72zm2.52-6.5a2.433 2.433 0 00-.32-.98c-.187-.333-.48-.613-.88-.84-.387-.24-.874-.36-1.46-.36-.654 0-1.22.2-1.7.6-.467.4-.787.927-.96 1.58h5.32zm4.45-3.74h2.08v1.48h.12c.214-.507.6-.927 1.16-1.26.56-.347 1.134-.52 1.72-.52.48 0 .874.067 1.18.2v2.3a3.35 3.35 0 00-1.52-.34c-.72 0-1.326.28-1.82.84-.48.547-.72 1.22-.72 2.02V15h-2.2V5.08zm11.441 10.24c-1.134 0-2.074-.26-2.82-.78-.734-.533-1.254-1.2-1.56-2l1.96-.84c.226.547.553.96.98 1.24.44.28.92.42 1.44.42.546 0 .993-.1 1.34-.3.346-.213.52-.487.52-.82 0-.32-.14-.58-.42-.78-.28-.213-.74-.4-1.38-.56l-1.36-.32a4.5 4.5 0 01-1.94-.96c-.534-.48-.8-1.1-.8-1.86 0-.92.38-1.647 1.14-2.18.76-.547 1.693-.82 2.8-.82.92 0 1.733.193 2.44.58.72.387 1.24.947 1.56 1.68l-1.94.82a1.87 1.87 0 00-.86-.92c-.387-.2-.807-.3-1.26-.3-.44 0-.827.1-1.16.3-.334.187-.5.44-.5.76 0 .28.113.507.34.68.24.173.613.32 1.12.44l1.48.36c1 .253 1.746.64 2.24 1.16.493.507.74 1.12.74 1.84 0 .587-.18 1.12-.54 1.6-.347.48-.834.86-1.46 1.14-.614.28-1.314.42-2.1.42z" fill="#5F6368"/></svg>
      <div class="footer__cluster cluster gap-top-300 flow-space-300 lg:gap-top-0 lg:gap-left-500 lg:flow-space-500">
        <div role="list">
          {# Google Developer logo #}
          <a role="listitem" class="footer__link" href="https://www.google.com/chrome/">Chrome</a>
          <a role="listitem" class="footer__link" href="https://firebase.google.com">Firebase</a>
          <a role="listitem" class="footer__link" href="https://developers.google.com/products">{{ 'i18n.footer.all_products' | i18n(locale) }}</a>
          <a role="listitem" class="footer__link" href="https://policies.google.com/privacy">{{ 'i18n.footer.privacy' | i18n(locale) }}</a>
          <a role="listitem" class="footer__link" href="https://policies.google.com/terms">{{ 'i18n.footer.terms' | i18n(locale) }}</a>
        </div>
      </div>
    </div>
    <div class="type--caption gap-top-500 color-secondary-text">
      {{ 'i18n.footer.content_license' | i18n(locale) }}
    </div>
  </div>

</footer>
